<template>
  <div class="container">
    <!-- 顶部导航 -->
    <div>
      <!-- 轮播图 -->
      <div id="img_show">
        <el-carousel :interval="4000" type="card" height="360px">
          <el-carousel-item v-for="item in imgList" :key="item.id">
            <img :src="item.idView" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 分类 -->
      <div class="classify-container">
        <div class="menu-classify">
          <router-link to="1" v-for="item in classify" :key="item.id">
            <span>{{ item.name }}</span>
          </router-link>
          <router-link to="1">
            <span>全部></span>
          </router-link>
        </div>
      </div>
    </div>
    <div>
      <SideBar></SideBar>
    </div>
  </div>
</template>

<script>
import SideBar from "./SideBar";
export default {
  name: "Homepage",
  components: {
    SideBar,
  },
  data() {
    return {
      imgList: [
        { id: 0, idView: require("./imgs/01.jpg") },
        { id: 1, idView: require("./imgs/02.jpg") },
        { id: 2, idView: require("./imgs/03.jpg") },
      ],
      classify: [
        { id: 0, name: "热血" },
        { id: 1, name: "古风" },
        { id: 2, name: "玄幻" },
        { id: 3, name: "奇幻" },
        { id: 4, name: "悬疑" },
        { id: 5, name: "都市" },
        { id: 6, name: "历史" },
        { id: 7, name: "武侠仙侠" },
        { id: 8, name: "游戏竟技" },
        { id: 9, name: "悬疑灵异" },
        { id: 10, name: "架空" },
        { id: 11, name: "青春" },
        { id: 12, name: "西幻" },
        { id: 13, name: "现代" },
      ],
    };
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
/*************轮播图***********/
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.img_show {
  background-color: dimgrey;
  padding-top: 50px;
  width: auto;
}
.image {
  width: 100%;
  height: inherit;
}
/**********************分类********************/
.classify-container {
  width: 100%;
  background-color: #000;
}
.menu-classify {
  width: 1260px;
  height: 62px;
  margin: 0 auto;
  margin-bottom: 10px;
  /* border-bottom: 1px solid #dcdcdc; */
  display: flex;
  justify-content: space-between;
}
.menu-classify a {
  width: 100px;
  height: 62px;
  color: #fff;
  margin: 0px 5px;
  text-decoration: none;
  line-height: 62px;
  text-align: center;
}
</style>
